<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="组件通信">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
</script>

<script lang="ts">
  function getDoc() {
    return `
### watch
* watch 用于监视对象变化，只可监视以下类型的数据:
  * ref 响应式对象
  * reactive 响应式对象
  * getter 函数: 无参且有返回值的函数
  * 以上三种类型的数组
* watch 函数返回一个停止监控的函数，调用则会停止监视
* watchEffect: 一种升级版的 watch，自动识别要监视的对象。
`;
  }
</script>
